<template>
  <div class="mobile-edit-container">
    <!-- 导航栏 -->
    <van-nav-bar title="古建筑彩绘文物调查管理系统" fixed @click-right="goToUser">
      <!-- 左侧插槽：显示“首页” -->
      <template #left>
        <!-- <span class="nav-text" @click="goHome">首页</span> -->
        <van-icon name="wap-home" class="nav-text" @click="goHome" size="18" />
      </template>

      <!-- 右侧用户图标 -->
      <template #right>
        <van-icon name="user" size="18" />
      </template>
    </van-nav-bar>
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span class="breadcrumb-item" @click="goHome">首页</span>
      <span class="breadcrumb-separator">></span>
      <span class="breadcrumb-item" @click="goToCategory">文物主体管理</span>
      <span class="breadcrumb-separator">></span>
      <span class="breadcrumb-item">新增文物主体</span>
    </div>
    <!-- 加载状态 -->
    <div v-if="loading" class="state-placeholder">
      <van-loading type="spinner" size="24px">提交中...</van-loading>
    </div>

    <!-- 表单 -->
    <van-form ref="formRef" class="edit-form" @submit="onSubmit" @failed="onFailed">
      <!-- 名称 -->
      <van-field v-model="formData.category.name" name="name" :rules="[{ required: true, message: '请输入名称' }]" clearable>
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 名称</span>
        </template>
        <template #placeholder>请输入文物主体名称</template>
      </van-field>

      <!-- 地理位置 -->
      <van-field v-model="formData.category.address" name="address" :rules="[{ required: true, message: '请输入地理位置' }]"
        type="textarea" autosize clearable>
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 地理位置</span>
        </template>
        <template #placeholder>请输入详细地理位置或存放地址</template>
      </van-field>

      <!-- 建筑年代 -->
      <van-field v-model="formData.category.construction_age" name="construction_age"
        :rules="[{ required: true, message: '请输入建筑年代' }]" clearable>
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 建筑年代</span>
        </template>
        <template #placeholder>例如：建于清康熙中期（公元1700年）</template>
      </van-field>

      <!-- 建筑类型 -->
      <van-field name="construction_type_selected" :rules="[{ required: true, message: '请至少选择一种建筑类型' }]">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 建筑类型</span>
        </template>
        <template #input>
          <van-checkbox-group v-model="formData.category.construction_type_selected" direction="horizontal">
            <van-checkbox name="市井戏台" shape="square">市井戏台</van-checkbox>
            <van-checkbox name="庙宇戏台" shape="square">庙宇戏台</van-checkbox>
            <van-checkbox name="宗祠戏台" shape="square">宗祠戏台</van-checkbox>
            <van-checkbox name="其他" shape="square">其他</van-checkbox>
          </van-checkbox-group>
        </template>
      </van-field>

      <!-- 其他建筑类型 -->
      <van-field v-if="formData.category.construction_type_selected.includes('其他')"
        v-model="formData.category.construction_type_other" name="construction_type_other"
        :rules="[{ required: true, message: '请填写其他建筑类型' }]" clearable>
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 其他类型</span>
        </template>
        <template #placeholder>请输入其他建筑类型</template>
      </van-field>

      <!-- 布局方位 -->
      <van-field v-model="formData.category.layout_orientation" name="layout_orientation"
        :rules="[{ required: true, message: '请输入布局方位' }]" clearable>
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 布局方位</span>
        </template>
        <template #placeholder>例如：坐北朝南、依山而建等</template>
      </van-field>

      <!-- 保护级别 -->
      <van-field name="protection_level_main" :rules="[{ required: true, message: '请至少选择一种保护级别' }]">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 保护级别</span>
        </template>
        <template #input>
          <van-radio-group v-model="formData.category.protection_level_main" direction="vertical">
            <van-radio name="国宝单位">国宝单位</van-radio>
            <van-radio name="省级">省级</van-radio>
            <van-radio name="市县级">市县级</van-radio>
            <van-radio name="未定级">未定级</van-radio>
          </van-radio-group>
        </template>
      </van-field>

      <!-- 保护级别补充信息 -->
      <van-field v-model="formData.category.protection_level_extra" name="protection_level_extra" label="级别补充信息"
        placeholder="如：批次：第1批全国重点文物保护单位" type="textarea" autosize />

      <!-- 描述 -->
      <van-field v-model="formData.category.description" name="description"
        :rules="[{ required: true, message: '请输入描述' }]" type="textarea" autosize>
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 描述</span>
        </template>
        <template #placeholder>请输入该文物主体的历史背景、文化价值等描述</template>
      </van-field>

      <!-- 主图上传 -->
      <van-field name="image" :rules="[{ required: true, message: '请上传类别图片', trigger: 'onSubmit' }]">
        <template #label>
          <span class="field-label"><span class="required-star">*</span> 主体图片</span>
        </template>
        <template #input>
          <van-uploader v-model:="formData.category.image" :max-count="1" upload-text="上传图片" preview-size="100"
            :before-read="beforeRead" />
        </template>
      </van-field>

      <!-- 图片预览弹窗 -->
      <van-image-preview v-model:show="dialogVisible" :images="[dialogImageUrl]" />

      <!-- 提交按钮 -->
      <div class="form-actions">
        <van-button block type="primary" native-type="submit" :loading="loading">
          {{ isEditMode ? '保存修改' : '保存文物主体' }}
        </van-button>
        <van-button block @click="handleReset" style="margin-top: 10px;">
          重置
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { useCategoryUpload } from '@/components/composables/useCategoryUpload'
import { showToast } from 'vant'
// import { showFailToast as showToast } from 'vant';

// 使用原有 composable
const {
  loading,
  formRef,
  formData,
  goHome,
  goToCategory,
  goToUser,
  onSubmit,
  onFailed,
  onClickLeft,
  handleReset,
  isEditMode, // 确保 useCategoryUpload 导出了 isEditMode
} = useCategoryUpload()

// 图片预览
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
</script>

<style scoped>
.mobile-edit-container {
  padding-top: 46px;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.edit-form {
  padding: 12px 16px;
}

.state-placeholder {
  padding: 80px 0;
  text-align: center;
}

.form-actions {
  margin-top: 30px;
}

/* 红色星号样式 */
.field-label {
  font-weight: normal;
  color: #333;
}

.required-star {
  color: #ee0a24;
  /* Vant 的主红色 */
  margin-right: 4px;
}

/* 面包屑样式 */
.breadcrumb {
  padding: 8px 16px;
  background-color: #f7f8fa;
  font-size: 14px;
  color: #666;
  display: flex;
  align-items: center;
  /* 确保不被 fixed 的 nav-bar 遮挡 */
  margin-top: 0px;
  /* van-nav-bar 的默认高度 */
}

.breadcrumb-item {
  color: #1989fa;
  /* 可点击项用蓝色 */
}

.breadcrumb-item:last-child {
  color: #333;
  font-weight: 500;
}

.breadcrumb-separator {
  margin: 0 1px;
  color: #999;
}
</style>
